<template>
	<div id="home" class="min_width">
		<!-- 头部导航 -->
		<!-- <Header :chooseIt='chooseIt'></Header> -->
		<div class="new-head-Box">
			<div class="left-logo">
				<img src="../../../static/images/logo.png" @click="homeShow()" alt="">
				<el-tooltip class="item" effect="light" :content="'当前系统版本'+' '+vsion" placement="top-start">
					<span>{{vsion}}</span>
				</el-tooltip>
			</div>
			<div class="right-meun">
				<div class="el-new-menu">
					<!-- el-men 所有的index 以及选中 active 都必须是必须字符串类型 -->
					<el-menu :default-active="menuTopChose" class="el-menu-lsbox" mode="horizontal" @select="handleSelect"
						background-color="#2C5586" text-color="#FFFFFF" active-text-color="#F0F0F0">
              <el-menu-item v-for="(item,index) in menudata" v-if="item.isMenu &&item.pid==0" :key="index" :index="index.toString()"
                             @click="menusChose(item.path,item.index)">
                {{item.title}} </el-menu-item>
            <!-- <el-menu-item @click="openPopimg()">加盟商管理</el-menu-item> -->

					</el-menu>
				</div>
				<div class="el-new-options">
					<div class="login-icon">
						<el-tooltip class="item" effect="light" content="公告管理" placement="top-start">
							<img src="../../../static/images/msg-icon.png" alt="" @click="announcementList()">
						</el-tooltip>
					</div>
					<div class="login-out">
						<el-dropdown trigger="click"
							style="background: #fff;border: none;height:40px;line-height:40px;padding:0px 15px;">
							<span class="el-dropdown-link">
								{{userName==' '?'暂未登录':userName}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown" style="width:140px;text-align: center;">
								<el-dropdown-item @click.native="upgradeLogManage()" class="borderBottom">更新日志</el-dropdown-item>
								<el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
		</div>
		<main class="mainShow">
			<!-- 左侧导航 多级导航 -->
			<div class="main-left" v-if="showleftM">
				<!-- 新建自定义菜单栏 -->
				<el-collapse v-model="munuDivchose" :accordion="true">
					<el-collapse-item v-for="(itex,ind_x) in leftmenu" :key="ind_x" v-if="itex.isMenu" :title="itex.title"
						:name="itex.index">
						<div v-for="(itx,idx) in itex.children" :key="idx" class="div-menu-item"
							:class="{'isActives':itx.index==menuLeftChose}" @click='reload(itx.path,itx.index)'>
							{{itx.title}}</div>
					</el-collapse-item>
				</el-collapse>
			</div>

			<!-- 右侧主内容区 -->
			<div class="main-right">
				<transition name="fade">
					<router-view class="view" :key='homeData' @gitHidden="hidenFooter"></router-view>
				</transition>
				<div class="all-footer" v-if="!hidden">
					<span> 渝ICP备14004187号-9 | 营业执照信息Copyright © 2014 优合一众 | www.youheone.com版权所有</span>
				</div>
			</div>
			
		</main>
	</div>
</template>

<script>
	import $ from 'jquery';
	export default {
		name: 'dataStatistics',
		data: function () {
			return {
				showleftM:true,//默认显示右边手风琴菜单
				hidden:false,
				vsion: '--',
				userName: ' ', //用户名称
				homeData: '',//重置刷新
				menuTopChose: '0',//当前选中的顶部菜单栏----以及左边菜单栏的展示
				menuLeftChose: '0',//原来菜单的选中
				munuDivchose: '0',//自定义手风琴下拉选中
				headerFixed: true,
				menudata: [],
				leftmenu: [],
			}
		},
		created: function () {
			this.userName = locache.get('userName');
			// this.$router.push('/dataStatistics');
		},
		// 提供可注入子组件属性
		provide() {
			return {
				reload: this.reload
			}
		},
		methods: {
			hidenFooter(val){
				this.hidden=val==true?true:false;
			},
			homeShow() {
				this.$router.push({
					path: '/dataStatistics'
				})
			},
			//跳转公告
			announcementList() {
				this.$router.push({
					path: '/announcementList'
				})
			},
			//顶部导航栏筛选
			handleSelect(key, keyPath) {
			},
			//左侧导航栏筛选
			handleLeftSelect(key, keyPath) {
			},
        openPopimg() {
            this.$alert("<div class='popCodeShow'><img src='/static/images/jingyingzhushou-qrcode.jpg'> <div class='popHints'>电脑版正在努力开发中~~<br/>微信扫一扫上面太阳码或者微信小程序搜索滳滳经营助手</div></div>", '暂仅支持小程序版', {
                center: true,
                dangerouslyUseHTMLString: true
            });
        },
			//选中顶部某一项
			menusChose(path, index) {
				locache.set('deviceListPage', 1);//重置回第一页
				this.menuTopChose = index.toString();
				index=Number(index); 
				this.leftmenu = this.menudata[index].children;//切换左边菜单栏
				this.$router.push({
					path: path
				})
			},
			//当前选中状态 reload定义 判断要跳转的页面是否是当前页面 如果是只需要刷新
			reload(path = '', indTet) {
				locache.set('deviceListPage', 1);//重置回第一页
				if (path == '' || path == this.$route.path) {
					// $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
					this.$nextTick(() => {
						this.homeData = Number(Date.parse(new Date()));
					})
				} else {
					this.menuTopChose = indTet.substring(0, 1);//顶部回显
					this.menuLeftChose = indTet;//右边栏回显
					this.$router.push({
						path: path
					})
				}

			},
			//获取屏幕高度
			getHeight() {
				var that = this;
				var newHeight = $(window).height() - 100;
				$('.mainShow').css("min-height", newHeight + 'px');

				that.$post({
					url: 'Common/Version/getNewestVersion',
					data: {
					},
					success: function (data) {
						if (data.code == 1000) {
							that.vsion = data.data
						} else {
							that.vsion = '';
						}
					}

				})
			},
			//退出登录
			logout() {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {}).then(() => {
					var token = locache.get('token');
					locache.set('token', ' ');
					locache.set('userName', ' ');
					locache.set('deviceListPage', 1);
					locache.set('deviceListPageSize', null);
					localStorage.setItem('username', '');
					localStorage.setItem('menudata', '');
					var token = locache.get('token');
					_this.$router.replace({path: '/'});
					location.reload();
				}).catch(() => {

				});
			},
			//更新日志
			upgradeLogManage(){
				this.$router.push('/upgradeLogManage');
			},
			//处理选中状态(顶部导航栏 以及 左边导航栏 回显)
			meunEcho(toPath) {
				var that = this, allArr = this.menudata;
				allArr.forEach((item, index) => {
					item.children  && item.children.forEach((itmB, idB) => {
						//是否展示左边菜单栏
						itmB.children && itmB.children.forEach((itmC, idC) => {
							if (toPath == itmC.path) {
								this.showleftM=itmB.isMenu?true:false;//是否展示左边菜单栏
								that.menuTopChose = itmC.index.split('-')[0];//顶部回显
								if (that.leftmenu === that.menudata[that.menuTopChose].children) {//如果和原有的数据一致,不需要重新赋值
								} else {
									that.leftmenu = that.menudata[that.menuTopChose].children;//切换左边菜单栏
								}
								//that.menuLeftChose=false;//右边栏回显重新创建DOM元素 *old*
								//localStorage.setItem('menuLeftChose', itmC.index);//*old*
								that.munuDivchose = itmB.index;//自定义菜单选择 取父级
								that.menuLeftChose = itmC.index;//右边栏回显 当前级别
								return;
							}
							itmC.children && itmC.children.length && itmC.children.forEach((itmD, idD) => {
								if (toPath == itmD.path) {
									that.menuTopChose = itmD.index.split('-')[0];//顶部回显
									if (that.leftmenu === that.menudata[that.menuTopChose].children) {//如果和原有的数据一致,不需要重新赋值
									} else {
										that.leftmenu = that.menudata[that.menuTopChose].children;//切换左边菜单栏
									}
									//that.menuLeftChose=false;//右边栏回显 *old*
									// localStorage.setItem('menuLeftChose', itmD.index.substring(0,5)); //*old*
									that.munuDivchose = itmB.index;
									that.menuLeftChose = itmC.index;
									return;
								}
							})
						})
					})
				});
			}
		},
		mounted() {
			
			var getmeun = JSON.parse(localStorage.getItem('menudata'));//顶部菜单栏
			var currPath = this.$route.path;
			this.menudata = getmeun;
			this.meunEcho(currPath);//针对刷新当前页面
			this.getHeight();
		},
		computed: {

		},
		updated() {
			// *old*
			// setTimeout(()=>{
			// 	this.menuLeftChose=localStorage.getItem('menuLeftChose');
			// },0)
		},
		watch: {
			'$route': function (to, from) {
				this.hidden=false;//重置默认显示 版权信息 // 子页面 this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
				if (this.menudata && this.menudata.length > 0) {
					this.meunEcho(to.path);
				}
			},
			deep: true
		}
	}
</script>

<style>
.main-right{
	min-height: 90vh;
}
.main-right>div:first-child{
	min-height: 88vh;
}
.all-footer{
	width: 100%;
	font-size: 14px;
	color: #A7A7A7;
	text-align: center;
	margin-top: -12px;
    height: 30px;
}
  .popCodeShow{
      min-height: 200px;
  }
  .popCodeShow img{

  }
  .popCodeShow .popHints{
      padding-top: 20px;
  }
	.main-left .el-menu-item.is-active {
		background-color: #999797 !important;
	}

	body {
		margin: 0;
	}

	#home {
		margin: 0 auto;
	}

	.new-head-Box {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #2C5586;
	}

	.new-head-Box .left-logo {
		width: 15%;
		min-width: 230px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		color: #FFF;
		/* padding: 0px 0.5% 0px 1%; */
	}

	.new-head-Box .left-logo img {
		height: 80px;
		display: block;
		box-sizing: border-box;
		cursor: pointer;
	}

	.new-head-Box .left-logo span {
		padding-left: 10px;
	}

	.new-head-Box .right-meun {
		width: 85%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 顶部菜单栏 */
	.new-head-Box .el-new-menu {
		width: 85%;
		height: 80px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.new-head-Box .el-new-options {
		min-width: 200px;
		width: 15%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.new-head-Box .el-menu-lsbox {
		height: 80px;
		float: none;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.new-head-Box .el-menu--horizontal>.el-menu-item {
		height: 40px;
		line-height: 40px;
		float: none;
		display: flex;
	}

	.new-head-Box .el-menu.el-menu--horizontal {
		border: none;
	}

	.new-head-Box .login-icon {
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.new-head-Box .login-out {
		width: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.new-head-Box .el-dropdown {
		background: #FFFFFF;
		min-width: 110px;
		text-align: center;
	}

	/* 下拉选项样式 */
	.login-out .el-dropdown-menu {
		width: 110px;
	}

	.login-out .el-dropdown {
		height: 30px;
		border: 1px solid #D6D3D0;
		padding: 0px 5px;
		line-height: 30px;
		border-radius: 4px;
	}

	.login-out .el-dropdown-menu__item {
		text-align: center;
	}

	.login-out .el-dropdown-link {
		width: 100%;
		cursor: pointer;
		color: #454342;
	}

	.el-icon-arrow-down {
		font-size: 14px;
	}

	.login-out .el-dropdown-menu__item:focus,
	.el-dropdown-menu__item:not(.is-disabled):hover {
		background-color: #FCF0D3;
		color: #FF6000;
	}

	.login-out .el-dropdown:focus,
	.login-out .el-dropdown:not(.is-disabled):hover {
		background-color: #D6D3D0;
		color: #454342;
	}

	/* 右边自定义手风琴效果 */
	.main-left .div-menu-item {
		color: rgb(0, 0, 0);
		background-color: rgb(255, 255, 255);
		min-width: 149px;
		overflow: hidden;
		height: 70px;
		line-height: 70px;
		font-size: 16px;
		font-weight: 500;
		white-space: nowrap;
		list-style: none;
		text-align: center;
		cursor: pointer;
	}

	.main-left .div-menu-item:hover {
		background: #CCCCCC;
	}

	.main-left .el-collapse-item__header {
		position: relative;
		font-size: 16px;
		height: 70px;
		line-height: 70px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		justify-content: center;
	}

	.main-left .el-collapse-item__header:hover {
		background: #CCCCCC;
	}

	.main-left .el-collapse-item__arrow {
		position: absolute;
		right: 8px;
		margin: 0;
	}

	.main-left .el-collapse-item__content {
		padding-bottom: 0px;
	}

	.main-left .isActives {
		animation: fade-in;
		/*动画名称*/
		animation-duration: .7s;
		/*动画持续时间*/
		background: #999797;
		color: #FFFFFF;
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		/*初始状态 透明度为0*/
		40% {
			opacity: 0.5;
		}

		/*过渡状态 透明度为0*/
		100% {
			opacity: 1;
		}

		/*结束状态 透明度为1*/
	}
	.borderBottom{
		border-bottom: 1px dotted #909399;
	}
</style>
